<template>

    <div class="Sousuo">
        <van-nav-bar
        left-arrow
        @click-left="onClickLeft"
        fixed
        />
            <van-search
            v-model="value"
            autofocus="true"
            shape="round"
            show-action
            clearable
            @focus="handleinput()"
            placeholder="请输入搜索关键词"
            @search="onSearch"
            style="z-index:2;position:fixed"
            id="message"
            >
            <template #action>
                <div @click="onSearch">搜索</div>
            </template>
            </van-search>
            <!-- <div class="historybox" v-show="historyxs">
                <h3>历史搜索</h3>
                <ul class="his_ulcon">
                    <li v-for="i in searches" :key="i">
                        {{i}}
                    </li>
                    <p @click="clearhis">清空历史记录</p>
                </ul>
            </div> -->
            <van-panel class="historybox" v-show="historyxs">
                <h3>历史搜索</h3>
                <template #footer>
                    <div>
                    <van-icon size="20" @click="clearhis" name="delete-o"/>
                    </div>
                </template>
                <ul class="his_ulcon">
                    <li v-for="i in searches" :key="i">
                        {{i}}
                    </li>
                </ul>
            </van-panel>   
            <van-list
            v-model="loading"
            :finished="finished"
            :offset="1"
            :immediate-check="false"
            finished-text="  "
            >
            <div class="content">
            
            <van-card
            v-if="searchResult.length>0"
            v-for="(item,i) in searchResult"
            :key="i"
           style="width:47%;margin:5px;float:left;top:56px;"
            :price="item.aprice"
            desc="新鲜水果"
            :title="item.aname"
            :origin-price="item.aprice"
            :thumb="item.a_image"
            >
            </van-card>
            <van-card
            v-else
            v-for="(item,i) in shangpings"
            :key="i"
           style="width:47%;margin:5px;float:left;top:56px;"
            :price="item.aprice"
            desc="新鲜水果"
            :title="item.aname"
            :origin-price="item.aprice"
            :thumb="item.a_image"
            >
            </van-card>
            </div>
            </van-list>
    </div>
</template>
<style class>
    /* .Sousuo .van-search__content{
        padding-left: 50px;
    }
    .Sousuo .van-search__content--round{
        padding-left: 50px;
    } */
    .Sousuo .van-search.van-search--show-action{
        right: 6px;
        width: 330px;
        top: 0px;
    }
    .Sousuo .van-search__content--round{
        border: 1px solid red;
        background-color: #fff;
    }
    .Sousuo .van-nav-bar.van-nav-bar--fixed.van-hairline--bottom{
        height: 56px;
    }
    .Sousuo .van-nav-bar__left{
        height: 56px;
    }
    .Sousuo .van-list{
        margin-bottom: 30px;
    }
    .Sousuo .van-list__finished-text{
        padding-top: 30px;
    }
    .Sousuo .content{
        position: relative;
        /* margin-top:100px; */
    }
    .Sousuo .historybox {
    width: 95%;
    display: block;
    padding: 10px 10px 50px;
    margin-top: 56px;
    /* 隐藏 */
    /* display: none; */
    }
    .Sousuo .list {
    list-style: none;
    }
    .Sousuo li{
    padding: 10px;
    float: left;
    display: block;
    }
    .Sousuo .his_ulcon p{
        display: block;
        padding: 10px;
    }

</style>

<script>
import { Toast } from 'vant';
import {throttle} from '../libs/utils.js'
import {saveSearch} from '../libs/cache.js'
export default {
  data() {
    return {
      value: '',
      searchResult:[],
      shangpings:[],
      page:1,
      pagecount:'',
      finished: false,
        loading: false,
        history:'',
        keys:[],
        historyxs:false,
        hottxt:'',
        searches:''
    };
  },
  methods: {
    handleinput(){//输入框获取焦点显示搜索历史记录	
	 		//为避免重复先清空再添加
	 		// $('.his_ulcon').children('li').remove();
             let searches=this.storage.get('_search_');
            //  console.log(searches);
	 		if(searches!=undefined){
                 this.searches=searches;
                 this.historyxs=true;
             }  
	 	},
        onSearch:throttle(function(e) {
        if(!this.value){
            Toast('请输入您要搜索的内容');
        }else{
            this.historyxs=false;
            this.searchResult=this.shangpings.filter((item)=>{
                saveSearch(this.value); 
                if(item.aname.includes(this.value)){
                    return item;
                    this.historyxs=false;
                    this.value="";
                }else{
                }
            })
            
        }
    },1000),
    clearhis(){
        this.storage.remove('_search_');
        this.searches='';
        this.historyxs=true;
        this.$router.go(0);
    },
    onClickLeft(){
        this.$router.push('/')
    },
    loadArticles(){
            this.loading = true;
            this.axios.get(`/allarticles`).then(result=>{
                let shangpings=result.data.result;
                shangpings.forEach(item=>{
                    if(item.a_image){
                        item.a_image=require(`../assets/${item.a_image}`)
                }
                // console.log(item.a_image);
                })
                this.shangpings=shangpings;
                // console.log(shangpings);
                this.loading = false;
                this.finished=true;
    
            })
        },

  },
  mounted(){
        this.loadArticles();
        message.focus()
    },
    created() {
        
    },
    
};
</script>

